<!-- 装备符文 -->
<template>
    <el-card v-for="column in columns">
      <!-- 标题栏 -->
      <template #header>
        <div class="card-header">
          <span>{{ column.name }}</span>
        </div>
      </template>
      <!-- 表单栏 -->
      <el-form :model="equipment">
        <el-form-item v-for="prop in column.properties" :key="prop.field" :label="prop.label">
          <!-- 布尔值选择框 -->
          <el-switch
            v-if="prop.type === 'boolean'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
          />
          <!-- 数字输入框 -->
          <el-input-number
            v-else-if="prop.type === 'number'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            controls-position="right"
            style="width: 100%"
          />
          <!-- 字符串输入框 -->
          <el-input
            v-else
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElTree } from 'element-plus';
import {ajax } from '@/api';
import { ElMessage } from 'element-plus';
import { number } from 'echarts';
import type { EquipTpl } from '@/pojo/equip-tpl';
const props = defineProps<{
  equipment?: EquipTpl; // 必须符合 Equipment 类型、
  openType: string; // 打开方式 add/edit/preview
}>();

let columns = ref([
    {
      name: '基础属性',
      properties: [
        { field: 'canInlayRune', label: '是否可以镶嵌符文', type: 'boolean' },
        { field: 'maxActiveRunes', label: '主动符文最大数量', type: 'number' },
        { field: 'maxPassiveRunes', label: '被动符文最大数量', type: 'number' }
      ]
    }
])


// 监听传入参数的变化
watch(
  () => props.equipment,
  (newVal, oldVal) => {
    console.log('权限参数发生变化:', newVal, oldVal);
    if (newVal) {
    
    }
  }
);
</script>

<style scoped></style>
